【Swift UI】@GestureStateの使い方！updating(_:body:)メソッド

@GestureState private var dragOffset: CGFloat = 0

定義
func updating<State>(
    _ state: GestureState<State>,
    body: @escaping (Self.Value, inout State, inout Transaction) -> Void
) -> GestureStateGesture<Self, State>

struct DragView: View {
    // Viewを表示させる座標値
    @State private var position = CGPoint(x: 0, y: 0)
    // ドラッグジェスチャー量
    @GestureState private var dragOffset = CGSize.zero
    
    var body: some View {
        Text("Hello")
            .frame(width: 100, height: 30)
            .background(Color.gray)
            // Viewを実際に移動させる
            .offset(x: position.x + dragOffset.width, y: position.y + dragOffset.height)
            .gesture(
                DragGesture()
                    // ドラッグジェスチャーの変更を観測
                    .updating($dragOffset, body: { (value, state, _) in
                        // state(GestureState)に移動した値を格納することで変化中も移動する
                        state = value.translation
                    })
                    // ドラッグ終了した際に呼ばれる
                    .onEnded({ value in
                        // 移動が完了した座標を格納して固定
                        self.position.x += value.translation.width
                        self.position.y += value.translation.height
                    })
            )
    }
}

struct BannerContainerView: View {
    
    private let array = Array(1...30)
    private let deviceWidth = DeviceSizeUtility.deviceWidth
    @GestureState private var dragOffset: CGFloat = 0
    @State private var currentIndex: CGFloat = 0
    
    var body: some View {
        VStack(spacing: 0) {
            GeometryReader { geometry in
                LazyHStack(spacing: 0) {
                    ForEach(array, id: \.self) { value in
                        Text("\(value)")
                            .frame(width: deviceWidth, height: 80)
                            .background(.orange)
                            .overlay {
                                RoundedRectangle(cornerRadius: 8)
                                    .stroke()
                            }
                    }
                }
            }
            // スワイプ中にバナーコンテナを移動させるためのオフセット
            .offset(x: dragOffset)
            // スワイプ完了後にバナーコンテナ自体を移動した後に固定するためのオフセット
            .offset(x: -(currentIndex * deviceWidth))
            // スワイプ完了後の動作をなめらかにするためのアニメーション
            .animation(.interpolatingSpring(mass: 0.6, stiffness: 150, damping: 80, initialVelocity: 0.1), value: dragOffset)
            .gesture(
                DragGesture(minimumDistance: 0)
                    // スワイプの変化を観測しスワイプの変化分をHStackのoffsetに反映(スワイプでビューが動く部分を実装)
                    .updating(self.$dragOffset, body: { (value, state, _) in
                        // スワイプ変化量をdragOffsetに反映
                        state = value.translation.width
                        // スワイプが完了するとdragOffsetの値は0になる
                        print("START", dragOffset)
                    })
                    .onEnded { value in
                        // value.translation.width：ドラッグを離した時の最終的な移動距離
                        // 1なら左スワイプ
                        // 0なら右スワイプ
                        let newIndex: CGFloat = value.translation.width > 0 ? 1 : 0
                        if newIndex == 1 {
                            currentIndex = max(currentIndex - 1, 0)
                            print("右スワイプ", currentIndex)
                        } else {
                            currentIndex = min(currentIndex + 1, CGFloat(array.count))
                            print("左スワイプ", currentIndex)
                        }
                      
                        print("END", dragOffset)
                    }
            )
        }
    }
}